<template>
  <div class="analysis">
    <div class="header">
      <div class="left">
        <div class="title">分析评价</div>
        <div class="button">
          <el-button icon="el-icon-delete" @click="removeAll">删除</el-button>
          <el-button icon="el-icon-upload2 inputfather"
            >导入
            <input type="file" class="inputFile" @change="importData" />
          </el-button>
          <el-button icon="el-icon-download" @click="derive">导出</el-button>
        </div>
      </div>
      <div class="right">
        <search-input @searchResult="search"></search-input>
      </div>
    </div>
    <div class="container">
      <el-checkbox-group v-model="ids">
        <div
          class="item"
          v-for="item in tableData"
          :key="item.id"
          @mouseenter="getEnterId(item.id)"
          @mouseleave="getLeaveId"
        >
          <div class="option">
            <el-checkbox
              :label="item.id"
              v-if="item.id === moveId || ids.includes(item.id)"
            ></el-checkbox>
            <div class="icon">
              <i class="el-icon-folder"></i>
            </div>
            <!-- <div class="name">
              <p class="title">任务名称</p>
              <p class="text">{{ item.taskName }}</p>
            </div> -->
            <div class="name">
              <p class="title">姓名</p>
              <p class="text">{{ item.name }}</p>
            </div>
            <div class="name">
              <p class="title">性别</p>
              <p class="text">{{ item.sex }}</p>
            </div>
            <div class="time">
              <p class="title">创建日期</p>
              <p class="text">{{ item.createTime }}</p>
            </div>
          </div>
          <div class="handle">
            <i class="el-icon-data-analysis" @click="show(item)"></i>
            <i class="el-icon-delete" @click="remove(item.id)"></i>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="footer">
      <Pagination :total="total" @pagination="onPaginationChange"></Pagination>
    </div>
    <div v-if="mask" class="mask">
      <div class="record">
        <div class="title">选择测试记录</div>
        <div v-if="options.length != 0" class="content">
          <div
            :class="item.id == testRecordId ? 'active item' : 'item'"
            v-for="item in options"
            :key="item.id"
            @click="select(item.id)"
          >
            第{{ item.frequency }}次记录——{{ item.createTime }}
          </div>
        </div>
        <div v-else class="tip">暂无数据</div>
        <div class="button">
          <el-button @click="cancel">取消</el-button>
          <el-button @click="selectRecord">确定</el-button>
        </div>
      </div>
    </div>
    <!-- <score v-if="flag" :scoreData="scoreData" @updateData="getData" /> -->
    <successTip v-if="success" :text="text" />
  </div>
</template>

<script>
import Score from "./score";
import { getFlyRecord } from "@/api/file";
import {
  deleteVideo,
  exportData,
  importData,
  getTestUserList,
} from "@/api/data";

export default {
  components: { Score },
  name: "Analysis",
  data() {
    return {
      text: "保存成功",
      success: false,
      tableData: [],
      searchData: {
        keyword: "",
        pageNum: 1,
        pageSize: 10,
      },
      ids: [],
      total: 0,
      moveId: null,
      scoreData: {},
      userList: null,
      mask: false,
      testUserId: null,
      options: null,
      testRecordId: null,
    };
  },
  methods: {
    cancel() {
      this.options = null;
      this.testRecordId = null;
      this.mask = false;
    },
    select(id) {
      this.testRecordId = id;
    },
    selectRecord() {
      if (this.testRecordId == null) {
        this.$modal.msgWarning("请选择测试记录！");
        return;
      }
      localStorage.setItem("testRecordId", this.testRecordId);
      this.$router.push("/data/analysis/record");
    },
    async importData(files) {
      // const fileHandles = await window.showOpenFilePicker({ multiple: true });
      // const files = [];
      // for (const fileHandle of fileHandles) {
      //   const file = await fileHandle.getFile();
      //   files.push(file.name);
      // }
      // importData({ strings: files }).then((res) => {
      //   console.log(res);
      // });
      const arr = [];
      const file = files.target.files;
      for (const item of file) {
        arr.push(item.name);
      }
      importData({ strings: arr }).then((res) => {
        console.log(res);
      });
    },
    derive() {
      if (this.ids.length === 0) {
        this.$modal.msgWarning("未选中任何数据！");
      } else {
        exportData({ ids: this.ids }).then((res) => {
          const link = document.createElement("a");
          link.href = res.data;
          link.style.display = "none";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
    },
    getData() {
      this.getTableData();
    },
    search(val) {
      this.searchData.keyword = val;
      this.getTableData();
    },
    show(item) {
      this.testUserId = item.id;
      getFlyRecord({ userId: this.testUserId }).then((res) => {
        this.options = res.data;
        this.mask = true;
      });
    },
    onPaginationChange({ page, limit }) {
      this.searchData.pageNum = page;
      this.getTableData();
    },
    async getTableData() {
      await getTestUserList(this.searchData)
        .then((res) => {
          this.tableData = res.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.tableData = [];
          this.total = 0;
        });
    },
    getEnterId(id) {
      this.moveId = id;
    },
    getLeaveId() {
      this.moveId = null;
    },
    remove(id) {
      this.ids.push(id);
      deleteVideo({ ids: this.ids }).then((res) => {
        this.successTip(this, "删除成功");
        this.getTableData();
        this.ids = [];
      });
    },
    removeAll() {
      if (this.ids.length === 0) {
        this.$modal.msgWarning("未选中任何数据！");
      } else {
        deleteVideo({ ids: this.ids }).then((res) => {
          this.successTip(this, "删除成功");
          this.getTableData();
        });
      }
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss">
.analysis {
  position: relative;
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }

      .button {
        margin-top: 36px;
        display: flex;
        height: 48px;
        position: relative;
        .el-button {
          padding: 0 28px;
          font-size: 16px;
          font-weight: bold;
          height: 48px;
          border-radius: 12px;
          border: 1px solid #e4e4e4;
        }

        .el-button + .el-button {
          margin-left: 30px;
        }
        .inputfather {
          position: relative;
        }
        .inputFile {
          width: 100px;
          position: absolute;
          left: calc(50% - 50px);
          background-color: red;
          opacity: 0;
        }
      }
    }

    .right {
      height: 66px;
      line-height: 66px;
    }
  }

  .container {
    margin-top: 4px;
    height: 688px;

    .el-checkbox-group {
      width: 100%;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      font-size: 16px;

      .item {
        margin: 20px 6px 0;
        display: flex;
        justify-content: space-between;
        width: 754px;
        height: 88px;
        background: #e4e4e4;
        border-radius: 8px;
        background-color: rgba(228, 228, 228, 0.3);

        &:hover {
          box-shadow: 0 0 20px 0 rgba($color: #000000, $alpha: 0.1);
        }

        .option {
          padding: 22px 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            width: 100px;

            .text {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .time {
            width: 180px;
          }

          div + div {
            margin-left: 20px;
          }

          .el-checkbox {
            margin-right: 20px;

            .el-checkbox__label {
              display: none;
            }
          }

          .icon {
            width: 38px;
            height: 38px;
            text-align: center;
            line-height: 38px;
            font-size: 18px;
            font-weight: bold;
            border: 1px solid #eee;
            border-radius: 50%;
            color: #365eff;
            background-color: #fff;
          }

          p {
            margin: 0;
          }

          .title {
            height: 16px;
            line-height: 16px;
            color: #999999;
          }

          .text {
            margin-top: 10px;
            height: 18px;
            line-height: 18px;
            font-size: 18px;
            font-weight: 500;
            color: #333333;
          }
        }

        .handle {
          padding: 32px 30px;
          display: flex;
          align-items: center;

          i + i {
            margin-left: 24px;
          }

          i {
            cursor: pointer;
            font-size: 24px;
            color: #365eff;

            &:last-child {
              color: red;
            }
          }
        }
      }
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba($color: #000000, $alpha: 0.6);
    .record {
      margin: 100px auto;
      padding: 24px;
      width: 500px;
      background: #fff;
      border-radius: 24px;
      .title {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
      }
      .content {
        margin: 24px 0;
        padding: 0 30px;
        max-height: 300px;
        overflow: auto;
        .item {
          padding-left: 24px;
          width: 100%;
          height: 48px;
          line-height: 48px;
          background: #e4e4e4;
          border-radius: 18px;
          cursor: pointer;
        }
        .active {
          background: #366eff;
          color: #fff;
        }
        .item + .item {
          margin-top: 12px;
        }
      }
      .tip {
        margin: 50px;
        font-size: 24px;
        text-align: center;
      }
      .button {
        display: flex;
        justify-content: space-around;
        .el-button {
          width: 204px;
          height: 48px;
          background: #365eff;
          border-radius: 12px;
          font-size: 18px;
          color: #ffffff;
          border: none;
        }
      }
    }
  }
}
</style>
